{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-menu" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="icon-checkmark"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="icon-return"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
    <div class="alert alert-danger alert-dismissible"><i class="icon-warning"></i> {{ error_warning }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="icon-pencil"></i> {{ text_form }}</h3>
      </div>
      <div class="panel-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-menu" class="form-horizontal">
          <div class="form-group required">
            <label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
            <div class="col-sm-10">
              <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control" />
              {% if error_name %}
              <div class="text-danger">{{ error_name }}</div>
              {% endif %}
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
            <div class="col-sm-10">
              <select name="status" id="input-status" class="form-control">
                {% if status %}
                <option value="1" selected="selected">{{ text_enabled }}</option>
                <option value="0">{{ text_disabled }}</option>
                {% else %}
                <option value="1">{{ text_enabled }}</option>
                <option value="0" selected="selected">{{ text_disabled }}</option>
                {% endif %}
              </select>
            </div>
          </div>
          <br />
          <ul class="nav nav-tabs{% if languages|length == 1 %} hidden{% endif %}" id="language">
            {% for language in languages %}
            <li{% if loop.index == 1 %} class="active"{% endif %}><a href="#language{{ language.language_id }}" data-toggle="tab"><img src="language/{{ language.code }}/icon.png" class="lang-icon" title="{{ language.name }}" /> {{ language.name }}</a></li>
            {% endfor %}
          </ul>
          <div class="tab-content">
            {% set item_row = 1 %}
            {% for language in languages %}
            <div class="tab-pane{% if loop.index == 1 %} active{% endif %}" id="language{{ language.language_id }}">
              <div class="row">
                <div class="col-sm-6">
                  <div class="dd" id="list{{ language.language_id }}">
                    <ol class="dd-list">
                      {% if menu_links[language.language_id] %}
                      {% for menu_link in menu_links[language.language_id] %}
                      {% set parent_row = 0 %}
                      <li class="dd-item" data-id="{{ item_row }}" id="item-row{{ item_row }}">
                        <div class="dd-handle">{{ menu_link.title }}</div>
                        <div class="item-edit"></div>
                        {% if error_menu_link[language.language_id][item_row] %}
                        <div class="item-error text-danger">{{ error_menu_link[language.language_id][item_row] }}</div>
                        {% endif %}
                        <div class="item-settings">
                          <div class="form-group">
                            <label>{{ entry_title }}</label>
                            <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][title]" value="{{ menu_link.title }}" placeholder="{{ entry_title }}" class="form-control item-title" />
                          </div>
                          <div class="form-group">
                            <label>{{ entry_link }}</label>
                            <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][link]" value="{{ menu_link.link }}" placeholder="{{ entry_link }}" class="form-control" />
                          </div>
                          <div class="row">
                            <div class="col-sm-8">
                              <div class="form-group">
                                <label>{{ entry_subtitle }}</label>
                                <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][subtitle]" value="{{ menu_link.subtitle }}" placeholder="{{ entry_subtitle }}" class="form-control" />
                              </div>
                              <div class="form-group">
                                <label>{{ entry_extra }}</label>
                                <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][extra]" value="{{ menu_link.extra }}" placeholder="{{ entry_extra }}" class="form-control" />
                              </div>
                            </div>
                            <div class="col-sm-4">
                              <div class="form-group image-wrap">
                                <label>{{ entry_image }}</label>
                                <a href="" id="thumb-image{{ item_row }}" data-toggle="image" class="img-thumbnail"><img src="{{ menu_link.thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                                <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][image]" value="{{ menu_link.image }}" id="input-image{{ item_row }}" />
                              </div>
                            </div>
                          </div>
                          <div class="action"><button type="button" class="btn btn-danger item-remove">{{ button_delete }}</button></div>
                          <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][row_id]" value="{{ item_row }}" />
                          <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][parent_id]" value="{{ parent_row }}" />
                          <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][sort_order]" value="{{ menu_link.sort_order }}" />
                        </div>
                        {% set parent_row = item_row %}
                        {% set item_row = item_row + 1 %}
                        {% if menu_link.children %}
                        <ol class="dd-list">
                          {% for link_2 in menu_link.children %}
                          <li class="dd-item" data-id="{{ item_row }}" id="item-row{{ item_row }}">
                            <div class="dd-handle">{{ link_2.title }}</div>
                            <div class="item-edit"></div>
                            {% if error_menu_link[language.language_id][item_row] %}
                            <div class="item-error text-danger">{{ error_menu_link[language.language_id][item_row] }}</div>
                            {% endif %}
                            <div class="item-settings">
                              <div class="form-group">
                                <label>{{ entry_title }}</label>
                                <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][title]" value="{{ link_2.title }}" placeholder="{{ entry_title }}" class="form-control item-title" />
                              </div>
                              <div class="form-group">
                                <label>{{ entry_link }}</label>
                                <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][link]" value="{{ link_2.link }}" placeholder="{{ entry_link }}" class="form-control" />
                              </div>
                              <div class="row">
                                <div class="col-sm-8">
                                  <div class="form-group">
                                    <label>{{ entry_subtitle }}</label>
                                    <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][subtitle]" value="{{ link_2.subtitle }}" placeholder="{{ entry_subtitle }}" class="form-control" />
                                  </div>
                                  <div class="form-group">
                                    <label>{{ entry_extra }}</label>
                                    <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][extra]" value="{{ link_2.extra }}" placeholder="{{ entry_extra }}" class="form-control" />
                                  </div>
                                </div>
                                <div class="col-sm-4">
                                  <div class="form-group image-wrap">
                                    <label>{{ entry_image }}</label>
                                    <a href="" id="thumb-image{{ item_row }}" data-toggle="image" class="img-thumbnail"><img src="{{ link_2.thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                                    <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][image]" value="{{ link_2.image }}" id="input-image{{ item_row }}" />
                                  </div>
                                </div>
                              </div>
                              <div class="action"><button type="button" class="btn btn-danger item-remove">{{ button_delete }}</button></div>
                              <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][row_id]" value="{{ item_row }}" />
                              <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][parent_id]" value="{{ parent_row }}" />
                              <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][sort_order]" value="{{ link_2.sort_order }}" />
                            </div>
                            {% set parent_row = item_row %}
                            {% set item_row = item_row + 1 %}
                            {% if link_2.children %}
                            <ol class="dd-list">
                              {% for link_3 in link_2.children %}
                              <li class="dd-item" data-id="{{ item_row }}" id="item-row{{ item_row }}">
                                <div class="dd-handle">{{ link_3.title }}</div>
                                <div class="item-edit"></div>
                                {% if error_menu_link[language.language_id][item_row] %}
                                <div class="item-error text-danger">{{ error_menu_link[language.language_id][item_row] }}</div>
                                {% endif %}
                                <div class="item-settings">
                                  <div class="form-group">
                                    <label>{{ entry_title }}</label>
                                    <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][title]" value="{{ link_3.title }}" placeholder="{{ entry_title }}" class="form-control item-title" />
                                  </div>
                                  <div class="form-group">
                                    <label>{{ entry_link }}</label>
                                    <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][link]" value="{{ link_3.link }}" placeholder="{{ entry_link }}" class="form-control" />
                                  </div>
                                  <div class="row">
                                    <div class="col-sm-8">
                                      <div class="form-group">
                                        <label>{{ entry_subtitle }}</label>
                                        <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][subtitle]" value="{{ link_3.subtitle }}" placeholder="{{ entry_subtitle }}" class="form-control" />
                                      </div>
                                      <div class="form-group">
                                        <label>{{ entry_extra }}</label>
                                        <input type="text" name="menu_link[{{ language.language_id }}][{{ item_row }}][extra]" value="{{ link_3.extra }}" placeholder="{{ entry_extra }}" class="form-control" />
                                      </div>
                                    </div>
                                    <div class="col-sm-4">
                                      <div class="form-group image-wrap">
                                        <label>{{ entry_image }}</label>
                                        <a href="" id="thumb-image{{ item_row }}" data-toggle="image" class="img-thumbnail"><img src="{{ link_3.thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                                        <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][image]" value="{{ link_3.image }}" id="input-image{{ item_row }}" />
                                      </div>
                                    </div>
                                  </div>
                                  <div class="action"><button type="button" class="btn btn-danger item-remove">{{ button_delete }}</button></div>
                                  <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][row_id]" value="{{ item_row }}" />
                                  <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][parent_id]" value="{{ parent_row }}" />
                                  <input type="hidden" name="menu_link[{{ language.language_id }}][{{ item_row }}][sort_order]" value="{{ link_3.sort_order }}" />
                                </div>
                              </li>
                              {% set item_row = item_row + 1 %}
                              {% endfor %}
                            </ol>
                            {% endif %}
                          </li>
                          {% endfor %}
                        </ol>
                        {% endif %}
                      </li>
                      {% endfor %}
                      {% endif %}
                    </ol>
                  </div>
                </div>
                <div class="col-sm-6">
                  <button type="button" onclick="addItem('{{ language.language_id }}');" class="btn btn-primary"><i class="icon-plus"></i>{{ button_add }}</button>
                  <button type="button" onclick="expandAll('{{ language.language_id }}');" class="btn btn-default">{{ button_expand_all }}</button>
                  <button type="button" onclick="collapseAll('{{ language.language_id }}');" class="btn btn-default">{{ button_collapse_all }}</button>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </form>
      </div>
    </div>
  </div>
  <script type="text/javascript"><!--
var item_row = {{ item_row }};

function addItem(language_id) {
  html = '<li class="dd-item" data-id="' + item_row + '" id="item-row' + item_row + '">';
  html += '<div class="dd-handle">{{ text_new_item }}</div><div class="item-edit"></div>';
  html += '<div class="item-settings">';
  html += '<div class="form-group"><label>{{ entry_title }}</label><input type="text" name="menu_link[' + language_id + '][' + item_row + '][title]" value="{{ text_new_item }}" placeholder="{{ entry_title }}" class="form-control item-title" /></div>';
	html += '<div class="form-group"><label>{{ entry_link }}</label><input type="text" name="menu_link[' + language_id + '][' + item_row + '][link]" value="" placeholder="{{ entry_link }}" class="form-control" /></div>';
  html += '<div class="row"><div class="col-sm-8">';
  html += '<div class="form-group"><label>{{ entry_subtitle }}</label><input type="text" name="menu_link[' + language_id + '][' + item_row + '][subtitle]" value="" placeholder="{{ entry_subtitle }}" class="form-control" /></div>';
  html += '<div class="form-group"><label>{{ entry_extra }}</label><input type="text" name="menu_link[' + language_id + '][' + item_row + '][extra]" value="" placeholder="{{ entry_extra }}" class="form-control" /></div>';
  html += '</div><div class="col-sm-4">';
	html += '<div class="form-group image-wrap"><label>{{ entry_image }}</label><a href="" id="thumb-image' + item_row + '" data-toggle="image" class="img-thumbnail"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="menu_link[' + language_id + '][' + item_row + '][image]" value="" id="input-image' + item_row + '" /></div>';
  html += '</div></div>';
  html += '<div class="action"><button type="button" class="btn btn-danger item-remove">{{ button_delete }}</button></div>';
  html += '<input type="hidden" name="menu_link[' + language_id + '][' + item_row + '][row_id]" value="' + item_row + '" />';
  html += '<input type="hidden" name="menu_link[' + language_id + '][' + item_row + '][parent_id]" value="" />';
	html += '<input type="hidden" name="menu_link[' + language_id + '][' + item_row + '][sort_order]" value="" />';
	html += '</div></li>';
	
  $('#list' + language_id + ' .dd-list:eq(0)').append(html);
	$('#list' + language_id + ' .dd-empty').remove();
	
	item_row++;
}

function expandAll(language_id) {
  $('#list' + language_id).nestable('expandAll');
}

function collapseAll(language_id) {
  $('#list' + language_id).nestable('collapseAll');
}

$('.dd').nestable({
  maxDepth: 3,
  scroll: true,
  onDragStart: function (l, e) {
    $('#container').addClass('moving-wrap');
  },
  beforeDragStop: function (l, e) {
    $('#container').removeClass('moving-wrap');
  },
  callback: function (l, e) {
    var items = l.nestable('toArray');
    $.each(items, function(i, v) {
        var item = $('[data-id='+v.id+']');
        item.find('[name*=row_id]').val(v.id);
        item.find('[name*=sort_order]').val(v.left);
        var parent_id = v.parent_id ? v.parent_id : 0;
        item.find('[name*=parent_id]').val(parent_id);
    });
  }
});

$('.dd').on('click', '.item-edit', function(e){
  $(this).closest('.dd-item').toggleClass('active').find('.item-title:eq(0)').focus();
  $('a[data-toggle="image"]').popover('destroy');
});

$('.dd').on('input', '.item-title', function(){
  var currentTitle = $(this).val();
  $(this).closest('.dd-item').find('.dd-handle:eq(0)').text(currentTitle);
});

$('.dd').on('click', '.item-remove', function(){
  var currentId = $(this).closest('.dd-item').data('id');
  $('.dd').nestable('remove', currentId);
  $('a[data-toggle="image"]').popover('destroy');
});
//--></script> 
<script type="text/javascript"><!--
$('#language a:first').tab('show');
//--></script> 
</div>
{{ footer }} 